<template lang="">
  <div>
    <!-- 操作按钮区域 -->
    <div class="btn-panel">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="create"
        >新增</el-button
      >
      <el-button type="success" size="small" icon="el-icon-edit" @click="update"
        >修改</el-button
      >
      <el-button type="danger" size="small" icon="el-icon-delete" @click="del"
        >删除</el-button
      >
    </div>
    <el-tree
      ref="trees"
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
    <Add v-if="add.visible" :param="add"></Add>
    <Edit v-if="edit.visible" :param="edit"></Edit>
  </div>
</template>
<script>
import Add from "./Add";
import Edit from "./Edit";
export default {
  name: "Profession",
  components: { Add, Edit },
  data() {
    return {
      data: [],
      selectNode: null, //选择的节点
      defaultProps: {
        children: "children",
        label: "label",
        parent_id: "parent_id",
        id: "id",
      },
      // 新增
      add: {
        visible: false,
        close: this.close,
        callback: this.tree,
      },
      // 编辑
      edit: {
        visible: false,
        close: this.close,
        callback: this.tree,
        form: null,
      },
    };
  },
  mounted() {
    this.tree();
  },
  methods: {
    handleNodeClick(data) {
      console.log(data, "fghgafdfghjkjklkj");
      this.selectNode = data;
      this.edit.form = data;
      console.log(this.edit.form);
    },
    // 初始化行业数据的树形结构
    tree() {
      this.getRequest("/profession/tree").then((res) => {
        if (res) {
          console.log(res.obj, "树形");
          this.data = res.obj;
        }
      });
    },
    // 添加行业
    create() {
      this.add.visible = true;
    },
    // 修改行业
    update() {
      if (this.edit.form == null || this.edit.form == "") {
        this.$message.info("请选中后再修改");
        return;
      }
      this.edit.visible = true;
    },
    // 删除行业
    del() {
      if (!this.selectNode) {
        this.$message.warning("请选择要删除的节点");
        return;
      }
      console.log(this.selectNode, "选择的节点");
      this.$confirm(
        "此操作将永久删除用户：[" + this.selectNode.label + "], 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/profession/" + this.selectNode.id).then(
            (res) => {
              if (res) {
                this.$message.success(res.message);
                this.tree();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭弹出框
    close() {
      this.add.visible = false;
      this.edit.visible = false;
    },
  },
};
</script>
<style lang=""></style>
